<template>
	<view class="checkOrder">
		<u-navbar :is-back="true" :custom-back='goBack' title="查看成员" back-text=''>
		</u-navbar>
		<view v-for="(item,index) in menberList" :key="index" class="content" style="text-align: center;padding: 15px 0 0 5px;">
			<view class="" @click="selectClickM(item,index)" style="margin: 5px;flex: 0 0 15px;">
				<image style="width: 1rem; height: 1rem" src="../../style/image/cargo/round.png" alt="" />
				<image style="width: 1rem; height: 1rem" src="../../style/image/cargo/selectRound.png" alt="" />
			</view>
			<view class="" style="flex: 1;">
				<view class="free">
					<text style="margin-right: 15px;">昵称</text>
					<text>不知道</text>
				</view>
				<view class="free">
					<text style="margin-right: 15px;">免费次数</text>
					<text>188887654321</text>
				</view>
			</view>
		</view>
		<uni-load-more  @clickLoadMore="clickLoadMore"  :content-text="contentText" :status="status" ></uni-load-more>
		<view class="button" style="display: flex;">
			<u-button type="success" style="border-radius: 0;flex: 6;" @click="jion">添加成员</u-button>
			<u-button type="error" style="border-radius: 0;flex: 6;" @click="del">删除</u-button>
		</view>
	</view>
</template>

<script lang="js">
	import uniLoadMore from '../loadMore/uni-load-more.vue'
	import {
		findWhiteListMemberList,
		delWhiteList
	} from '../../utils/uniApi.ts'
	export default {
		components:{
			 'uniLoadMore':uniLoadMore
		},
		data() {
			return {
				whiteDic: {}, //白名单
				menberList: [], //白名单成员列表

				pageN: 1, //分页的页数
				status: 'more',
				contentText: {
					contentdown: '下拉或点击查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				continueTypes: true,
			};
		},
		onLoad(options) {
			if (options.white) {
				this.whiteDic = JSON.parse(options.white)
				uni.setStorage({
					key: "whiteListwhiteDic",
					data: this.whiteDic,
					success: function() {},
				});
			} else {
				this.whiteDic = uni.getStorageSync("whiteListwhiteDic");
			}
		},
		onShow() {
			this.getfindWhiteListMemberList()
		},
		onHide() {
			uni.hideLoading();
		},
		methods: {
			//下拉刷新
			onPullDownRefresh() {
				setTimeout(function() {
					uni.redirectTo({
						url: "../../pages/whiteList/checkOrder",
					});
					uni.stopPullDownRefresh();
				}, 1000);
			},
			//上拉加载更多
			onReachBottom() {
				if (!this.continueTypes) {
					return
				}
				this.pageN = this.pageN + 1;
				this.getfindWhiteListMemberList(this.pageN);
			},
			clickLoadMore() {
				this.onReachBottom()
			},

			//查询白名单成员列表
			getfindWhiteListMemberList(page) {
				uni.showLoading({
					title: "加载中",
				});
				let params = {
					userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
					whiteListId: this.whiteDic.id, //白名单ID
					pageNo: page,
					pageSize: 10
				};
				findWhiteListMemberList(params).then((res) => {
					// console.log("++++++++虚拟码:", JSON.stringify(res));
					uni.hideLoading();

					if (res.data.code == 200) {
						// this.menberList = res.data.data
						var boolee = res.data.hasNext == false && this.continueTypes == false;
						if (res.data.hasNext == true) {
							this.status = "more";
						} else {
							this.status = "noMore";
						}
						if (res.data.isFirst || !boolee) {
							if (res.data.hasNext == false) {
								this.continueTypes = false;
							}
							if (this.menberList.length > 0 && this.pageN == 1) { //搜索  删除已有数据
								this.menberList = [];
							}
							res.data.data.filter((item, index) => {
								item.show = false
								this.menberList.push(item);
							})
							// this.menberList = this.menberList.concat(res.data.data)
						}
					} else {
						uni.showToast({
							title: "数据加载失败，请稍后重试",
							icon: "none",
							duration: 2000,
						});
					}
				});
			},
			//删除成员
			del() {
				uni.showLoading({
					title: "加载中",
				});
				let params = {
					userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
					memberId: '',
				};
				delWhiteList(params).then((res) => {
					// console.log("++++++++删除成员:", JSON.stringify(res));
					uni.hideLoading();
					if (res.data.code == 200) {
						uni.showToast({
							title: "删除成功",
							icon: "none",
							duration: 2000,
						})
					} else {}
				})
			},
			//单选框
			selectClickM() {
				this.show = !this.show
			},

			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			jion() {
				uni.navigateTo({
					url: "./join?whiteList=" + encodeURIComponent(JSON.stringify(this.whiteDic))
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.checkOrder {
		height: 100%;
		background-color: #F3F5F7;
	}


	.button {
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.content {
		margin: 15rpx;
		background-color: #fff;
		border-radius: 10rpx;
		display: flex;

		.icon,
		.icon>view,
		.free {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0.5em 1em;
		}

		.free {
			padding: 0 1em 1em 1.5rem;
		}
	}
</style>
